<template lang="pug">
  el-upload(
  ref="upload"
  :data="extraData"
  :action="action"
  :headers="headers"
  :multiple="true"
  :on-success="handleSuccess"
  :on-error="handleError"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  :before-upload="beforeUpload"
  :limit="limit"
  :on-exceed="handleExceed"
  :file-list="fileListData"
  :list-type="listType")
    el-button(size="small" :type="btnType" style="font-size:14px" :disabled="disabled") {{btnText}}
    div(slot="tip" class="el-upload__tip" v-if="tipText") {{tipText}}
</template>
<!--  :auto-upload="false"-->
<script type="text/ecmascript-6">
  import Cache from '../common/cache.js'
  import Vue from 'vue'
  import Message from '../common/message'

  export default {
    name: 'largeFileUpload',
    props: {
      limit: { // 设置文件上传数量
        type: Number, default: 1
      },
      action: { // 文件上传路径
        type: String, default: ''
      },
      fileType: {
        type: String
      },
      extraData: {
        type: Object
      },
      onlyMedia: {
        type: Boolean,
        default: true
      },
      btnText: {
        type: String, default: '点击上传'
      },
      btnType: { // 上传按钮类型
        type: String, default: 'text'
      },
      tipText: {
        type: String, default: ''
      },
      listType: { // 文件回显列表类型
        type: String,
        default: 'text'
      },
      disabled: { // 是否禁用
        type: Boolean,
        default: false
      },
      fileList: {
        type: Array,
        default() {
          return []
        }
      },
      videoIndex: {
        type: Number
      }
    },
    data() {
      return {
        // https://jsonplaceholder.typicode.com/posts/
        file: null,
        headers: {'access_token': Cache.get('access_token'), 'jsessionid': Cache.get('user_token')},
        fileListData: this.fileList,
        isUpload: true
      }
    },
    mounted() {
      if (this.fileType === 'pdffile') {
        this.listType = 'text'
      } else if (this.fileType === 'Upfile') {
        this.listType = 'text'
      } else if (this.fileType === 'pptfile') {
        this.listType = 'text'
      }
    },
    methods: {
      handleError(response, file, fileList) {
        console.log('response1:', response)
        console.log('file:', file)
        console.log('fileList:', fileList)
      },
      handleRemove(file, fileList) {
        let filename = file.name.substring(file.name.lastIndexOf('\\') + 1, file.name.length)
        console.log('filename---', filename)
        if (filename !== '' && filename !== undefined) {
          // 删除nodejs中数据
          Vue.axios.request({
            method: 'DELETE',
            url: '/camel/rest/mplive/liveVideo',
            params: {
              'filename': filename
            }
          }).then((response) => {
            console.log(response.data.success)
          })
        }
        this.$emit('filePath', null, null, this.videoIndex)
      },
      beforeUpload(file) {
        let isJPG = false
        let isLt2M = false
        // if (file.name.indexOf(' ') > -1) {
        //   Message.error('文件名含有空格，请删除空格后重新上传')
        //   this.$refs.upload.clearFiles()
        //   return false
        // }
        if (this.onlyMedia) {
          // let isPdf = false
          if (this.fileType === 'img') {
            isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
            isLt2M = file.size / 1024 / 1024 < 20
            if (!isJPG) {
              Message.error('上传图片只能是 JPG 或 PNG 格式!')
              this.fileListData = []
              return
            }
          } else if (this.fileType === 'video') {
            console.log('file.type', file.type)
            isJPG = file.type === 'video/avi' || file.type === 'video/mp4' || file.type === 'video/webm'
            isLt2M = file.size / 1024 / 1024 < 5000
            if (!isJPG) {
              Message.error('上传视频只能是 MP4、webm 或 avi 格式!')
              this.fileListData = []
              return false
            }
            if (file.name.indexOf(' ') > -1) {
              Message.error('文件名含有空格，请删除空格后重新上传')
              return false
            }
            if (!isLt2M) {
              Message.error('上传视频大小不能超过 5000MB!')
              this.fileListData = []
              return false
            }
            return this.VerifiVideo(file)
          } else if (this.fileType === 'Upfile') {
            // isPdf = file.type === 'application/pdf'
            isJPG = file.type === 'application/pdf' || file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || file.type === 'text/plain' || file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-powerpoint'
            isLt2M = file.size / 1024 / 1024 < 50000
            console.log('file.type---', file.type)
            this.listType = 'text'
            if (!isJPG) {
              Message.error('上传文件包含[pdf/doc/docx/txt/xls/xlsx/ppt]')
              this.fileListData = []
              return
            }
          } else if (this.fileType === 'pdffile') {
            isJPG = file.type === 'application/pdf'
            isLt2M = file.size / 1024 / 1024 < 50000
            this.listType = 'text'
            if (!isJPG) {
              Message.error('上传文件只能是PDF格式!')
              this.fileListData = []
              return
            }
          } else if (this.fileType === 'pptfile') {
            isJPG = file.type === 'application/vnd.ms-powerpoint'
            isLt2M = file.size / 1024 / 1024 < 50000
            this.listType = 'text'
            if (!isJPG) {
              Message.error('上传文件只能是PPT格式!')
              this.fileListData = []
              return
            }
          } else {
            this.fileListData = []
            isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
            isLt2M = file.size / 1024 / 1024 < 2
            if (!isJPG) {
              Message.error('上传音频只能是 JPG 或 PNG 格式!')
              this.fileListData = []
              return
            }
            if (!isLt2M) {
              Message.error('上传音频大小不能超过 2MB!')
              this.fileListData = []
              return
            }
          }
          if (!isJPG || !isLt2M) {
            this.isUpload = false
            this.fileListData = []
          }
          return isJPG && isLt2M
        } else {
          return true
        }
      },
      handleSuccess(response, file, fileList) {
        console.log('response===============', response)
        let fileName = response.path.substring(response.path.lastIndexOf('\\') + 1, response.path.length + 1)
        console.log('fileName===============', fileName)
        // this.$emit('filePath', 'https://192.168.31.112:443/' + response.path, fileName, this.videoIndex)
        this.$emit('filePath', 'https://xsdmkj.cn:8443' + response.path, fileName, this.videoIndex)
        // 调用提交
        // this.$emit('uploadSuccess')
      },
      handlePreview(file) {
        console.log(file)
      },
      handleExceed(files, fileList) {
        Message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeRemove(file, fileList) {
        if (file.name.indexOf(' ') === -1) {
          return this.$confirm(`确定移除 ` + file.name + `？`)
          // return true
        }
      },
      VerifiVideo(file) {
        console.log('==================', file)
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/mplive/liveVideo/getVideo',
          params: {
            // jsonStr: {'curriculumVideo': filePath}
            'filename': file.name
          }
        }).then(res => {
          console.log('res---', res.data)
          if (res.data.success === true) {
            Message.error('视频名重复！请重新选择视频或更换视频名字后上传！')
            this.$refs.upload.clearFiles()
            return false
          } else if (res.data.success === false) {
            // return this.beforeUpload(file)
            return true
          }
        })
      }
    }
  }
</script>
<style scoped lang="stylus" type="text/stylus">
</style>
